<script>
import { ref } from "vue";
import Aside from "./Aside.vue";
import Header from "./Header.vue";
import Main from "./Main.vue";
import "element-plus/dist/index.css";
import {Menu} from '@element-plus/icons-vue';


export default {
  name: "Index",
  components: {
    Header,
    Main,
    Aside,
  },
  data() {
    const item = {
      date: '2016-05-02',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    }
    const tableData = ref(Array.from({ length: 20 }).fill(item))
    return {
      item,
      tableData,
      isCollapse: false
    }
  },
  methods: {
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    }
  }

}
</script>

<template>
  <el-container class="layout-container" style="height: 100vh">
    <el-aside 
      :width="isCollapse ? '64px' : '200px'" 
      class="sidebar-container"
      :class="{ 'collapsed': isCollapse }"
    >
      <Aside :isCollapse="isCollapse"/>
    </el-aside>

    <el-container class="main-container">
      <el-header class="header-container">
        <Header @toggle-collapse="toggleCollapse" :isCollapse="isCollapse"/>
      </el-header>

      <el-main class="content-container">
        <Main/>
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped>
.layout-container {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
}

.sidebar-container {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 2px 0 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  overflow: hidden;
}

.sidebar-container.collapsed {
  background: rgba(255, 255, 255, 0.9);
}

.header-container {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
  padding: 0;
  height: 60px !important;
  display: flex;
  align-items: center;
}

.content-container {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
  padding: 20px;
  overflow: hidden;
}

.main-container {
  transition: all 0.3s ease;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .sidebar-container {
    position: fixed;
    z-index: 1000;
    height: 100vh;
  }
  
  .sidebar-container.collapsed {
    transform: translateX(-100%);
  }
  
  .main-container {
    margin-left: 0;
  }
}

/* 滚动条美化 */
:deep(.el-scrollbar__bar) {
  background: rgba(255, 255, 255, 0.3);
}

:deep(.el-scrollbar__thumb) {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
}

:deep(.el-scrollbar__thumb:hover) {
  background: rgba(255, 255, 255, 0.7);
}
</style>